```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>技术小馆 · 服务器部署指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
            line-height: 1.6;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
            color: #0f172a;
        }
        .hero {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        }
        .code-block {
            background-color: #1e293b;
            border-left: 4px solid #8b5cf6;
        }
        .step-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .highlight {
            position: relative;
        }
        .highlight:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30%;
            background-color: rgba(139, 92, 246, 0.2);
            z-index: -1;
            transition: all 0.3s ease;
        }
        .highlight:hover:after {
            height: 50%;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl text-center">
            <div class="flex justify-center mb-6">
                <div class="bg-white bg-opacity-20 p-3 rounded-full">
                    <i class="fas fa-server text-3xl"></i>
                </div>
            </div>
            <h1 class="text-4xl md:text-5xl font-bold mb-4">服务器部署全流程指南</h1>
            <p class="text-xl md:text-2xl opacity-90 max-w-3xl mx-auto">从零开始搭建企业级开发环境与部署RuoYi-Vue项目</p>
            <div class="mt-8">
                <div class="inline-block bg-white bg-opacity-20 px-6 py-2 rounded-full">
                    <span class="mr-2"><i class="fas fa-clock"></i></span>
                    <span>预计完成时间: 60分钟</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="container mx-auto max-w-5xl px-4 md:px-0 py-12">
        <!-- Introduction -->
        <section class="mb-16">
            <div class="bg-white rounded-xl shadow-md p-8">
                <h2 class="text-2xl font-bold mb-6 text-center">前言</h2>
                <p class="text-lg mb-6">本指南详细记录了如何使用Cursor编辑器连接远程服务器，并完成从环境配置到项目部署的全过程。无论您是初学者还是有一定经验的开发者，都能按照本文步骤完成企业级项目的部署。</p>
                
                <div class="grid md:grid-cols-3 gap-6 mt-8">
                    <div class="bg-indigo-50 p-6 rounded-lg border border-indigo-100">
                        <div class="text-indigo-600 text-2xl mb-3"><i class="fas fa-laptop-code"></i></div>
                        <h3 class="font-bold mb-2">工具准备</h3>
                        <p class="text-slate-600">Cursor编辑器 + SSH插件</p>
                    </div>
                    <div class="bg-purple-50 p-6 rounded-lg border border-purple-100">
                        <div class="text-purple-600 text-2xl mb-3"><i class="fas fa-server"></i></div>
                        <h3 class="font-bold mb-2">环境依赖</h3>
                        <p class="text-slate-600">JDK + MySQL + Redis + Nginx</p>
                    </div>
                    <div class="bg-blue-50 p-6 rounded-lg border border-blue-100">
                        <div class="text-blue-600 text-2xl mb-3"><i class="fas fa-project-diagram"></i></div>
                        <h3 class="font-bold mb-2">项目架构</h3>
                        <p class="text-slate-600">RuoYi-Vue前后端分离</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Deployment Process -->
        <section class="mb-16">
            <h2 class="text-3xl font-bold mb-8 text-center">部署流程概览</h2>
            <div class="mermaid">
                graph TD
                    A[准备工作] --> B[连接服务器]
                    B --> C[环境配置]
                    C --> D[项目部署]
                    D --> E[系统优化]
                    E --> F[维护备份]
            </div>
        </section>

        <!-- Section 1 -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-indigo-600 text-white w-12 h-12 rounded-full flex items-center justify-center mr-4">
                    <span class="text-xl font-bold">1</span>
                </div>
                <h2 class="text-2xl font-bold">前期准备工作</h2>
            </div>
            
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="p-6 md:p-8">
                    <div class="flex items-center mb-6">
                        <div class="bg-indigo-100 text-indigo-600 w-10 h-10 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-download"></i>
                        </div>
                        <h3 class="text-xl font-bold">1.1 本地安装Cursor编辑器</h3>
                    </div>
                    <p class="mb-6">首先需要在本地Windows系统上安装Cursor编辑器，为后续的远程服务器连接和项目部署做准备。</p>
                    
                    <div class="grid md:grid-cols-2 gap-6 mb-8">
                        <div class="step-card bg-white border border-gray-200 rounded-lg p-6 transition-all duration-300">
                            <div class="text-purple-600 text-xl mb-3"><i class="fas fa-globe"></i></div>
                            <h4 class="font-bold mb-2">下载安装包</h4>
                            <p class="text-slate-600">访问Cursor官网下载适用于Windows的安装包</p>
                            <div class="mt-4">
                                <a href="https://cursor.sh/" class="text-indigo-600 hover:text-indigo-800 font-medium">https://cursor.sh/</a>
                            </div>
                        </div>
                        <div class="step-card bg-white border border-gray-200 rounded-lg p-6 transition-all duration-300">
                            <div class="text-blue-600 text-xl mb-3"><i class="fas fa-plug"></i></div>
                            <h4 class="font-bold mb-2">安装SSH插件</h4>
                            <p class="text-slate-600">在Cursor中安装Remote-SSH插件，实现远程连接功能</p>
                            <ul class="mt-3 text-sm text-slate-500">
                                <li class="mb-1"><i class="fas fa-search mr-2"></i>搜索并安装"Remote - SSH"</li>
                                <li><i class="fas fa-sync-alt mr-2"></i>安装完成后重启Cursor</li>
                            </ul>
                        </div>
                    </div>

                    <div class="border-t border-gray-200 pt-6 mt-6">
                        <div class="flex items-center mb-6">
                            <div class="bg-indigo-100 text-indigo-600 w-10 h-10 rounded-full flex items-center justify-center mr-4">
                                <i class="fas fa-link"></i>
                            </div>
                            <h3 class="text-xl font-bold">1.2 详细安装参考</h3>
                        </div>
                        <div class="bg-blue-50 border border-blue-100 rounded-lg p-4">
                            <div class="flex">
                                <div class="text-blue-500 mr-3 mt-1"><i class="fas fa-book"></i></div>
                                <div>
                                    <p class="font-medium">详细步骤可以参考这篇文章：</p>
                                    <a href="https://www.yuque.com/jtostring/qiwsg9/gxagkc2mwcpugwgi" class="text-blue-600 hover:text-blue-800 break-all">12、Cursor链接远程服务器实现项目部署</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-8 py-4 border-t border-gray-200">
                    <div class="flex items-center text-sm text-gray-600">
                        <i class="fas fa-info-circle mr-2"></i>
                        <span>完成Cursor安装和SSH插件配置后，即可开始连接远程服务器</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section 2 -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-purple-600 text-white w-12 h-12 rounded-full flex items-center justify-center mr-4">
                    <span class="text-xl font-bold">2</span>
                </div>
                <h2 class="text-2xl font-bold">连接远程服务器</h2>
            </div>
            
            <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
                <div class="p-6 md:p-8">
                    <div class="flex items-center mb-6">
                        <div class="bg-purple-100 text-purple-600 w-10 h-10 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-terminal"></i>
                        </div>
                        <h3 class="text-xl font-bold">2.1 配置SSH连接</h3>
                    </div>
                    
                    <div class="mb-6">
                        <ol class="list-decimal pl-5 space-y-3">
                            <li>在Cursor中，按下 <code class="bg-gray-100 px-2 py-1 rounded">F1</code> 或 <code class="bg-gray-100 px-2 py-1 rounded">Ctrl+Shift+P</code> 打开命令面板</li>
                            <li>输入 "Remote-SSH: Connect to Host..."</li>
                            <li>选择 "Add New SSH Host..."</li>
                            <li>输入SSH连接命令，例如：<code class="bg-gray-100 px-2 py-1 rounded">ssh username@server_ip</code></li>
                            <li>选择配置文件保存位置</li>
                            <li>输入远程服务器密码</li>
                        </ol>
                    </div>
                    
                    <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
                        <div class="flex">
                            <div class="text-yellow-500 mr-3"><i class="fas fa-exclamation-triangle"></i></div>
                            <div>
                                <p class="font-medium text-yellow-800">安全提示</p>
                                <p class="text-yellow-700">建议使用SSH密钥认证而非密码认证，安全性更高。可在本地生成密钥对后将公钥添加到服务器的~/.ssh/authorized_keys文件中。</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex items-center mt-8 mb-6">
                        <div class="bg-purple-100 text-purple-600 w-10 h-10 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-network-wired"></i>
                        </div>
                        <h3 class="text-xl font-bold">2.2 连接到远程服务器</h3>
                    </div>
                    
                    <div class="mb-6">
                        <ol class="list-decimal pl-5 space-y-3">
                            <li>再次打开命令面板，输入 "Remote-SSH: Connect to Host..."</li>
                            <li>选择刚才配置的服务器</li>
                            <li>输入密码完成连接</li>
                            <li>连接成功后，可以在Cursor中直接操作远程服务器文件系统</li>
                        </ol>
                    </div>
                </div>
                <div class="bg-gray-50 px-8 py-4 border-t border-gray-200">
                    <div class="flex items-center text-sm text-gray-600">
                        <i class="fas fa-check-circle mr-2 text-green-500"></i>
                        <span>成功连接后，您将能够在Cursor中直接访问远程服务器的文件系统，就像操作本地文件一样</span>
                    </div>
                </div>
            </div>
            
            <!-- Tips Section -->
            <div class="bg-indigo-50 rounded-xl p-6 border border-indigo-100">
                <h3 class="text-xl font-bold mb-4 flex items-center">
                    <i class="fas fa-lightbulb text-indigo-600 mr-3"></i>
                    <span>专业提示</span>
                </h3>
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <h4 class="font-bold mb-2 text-indigo-800">多会话管理</h4>
                        <p class="text-slate-700">Cursor支持同时连接多个远程服务器，您可以在左下角状态栏快速切换不同的SSH连接。</p>
                    </div>
                    <div>
                        <h4 class="font-bold mb-2 text-indigo-800">文件传输</h4>
                        <p class="text-slate-700">直接拖拽本地文件到远程目录即可上传，右键文件可选择下载到本地，极大简化了文件传输流程。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section 3 -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-blue-600 text-white w-12 h-12 rounded-full flex items-center justify-center mr-4">
                    <span class="text-xl font-bold">3</span>
                </div>
                <h2 class="text-2xl font-bold">服务器环境配置</h2>
            </div>
            
            <div class="mb-8">
                <p class="text-lg mb-6">成功连接服务器后，需要配置必要的运行环境，包括JDK、MySQL、Redis和Nginx等基础服务。以下是详细的安装和配置步骤。</p>
                
                <div class="mermaid mb-8">
                    pie
                        title 环境组件占比
                        "JDK" : 20
                        "MySQL" : 30
                        "Redis" : 15
                        "Nginx" : 25
                        "其他" : 10
                </div>
            </div>
            
            <!-- JDK Installation -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
                <div class="p-6 md:p-8">
                    <div class="flex items-center mb-6">
                        <div class="bg-blue-100 text-blue-600 w-10 h-10 rounded-full flex items-center justify-center mr-4">
                            <i class="fab fa-java"></i>
                        </div>
                        <h3 class="text-xl font-bold">3.1 JDK安装</h3>
                    </div>
                    
                    <p class="mb-6">RuoYi-Vue后端基于Java开发，需要安装JDK运行环境。以下是安装JDK 8的步骤：</p>
                    
                    <div class="code-block rounded-lg overflow-hidden mb-6">
                        <div class="bg-gray-800 text-gray-300 px-4 py-2 text-sm flex justify-between items-center">
                            <span>终端命令</span>
                            <button class="text-gray-400 hover:text-white" onclick="copyCode(this)">
                                <i class="far fa-copy"></i>
                            </button>
                        </div>
                        <pre class="text-gray-200 p-4 overflow-x-auto"><code># 更新软件包列表
sudo apt update

# 安装 JDK 8
sudo apt install -y openjdk-8-jdk

# 验证安装
java -version
javac -version

# 配置 JAVA_HOME 环境变量
echo 'export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64' >> ~/.bashrc
echo 'export PATH=$PATH:$JAVA_HOME/bin' >> ~/.bashrc
source ~/.bashrc</code></pre>
                    </div>
                    
                    <div class="bg-indigo-50 rounded-lg p-4 border border-indigo-100">
                        <h4 class="font-bold mb-2 text-indigo-800 flex items-center">
                            <i class="fas fa-question-circle text-indigo-600 mr-2"></i>
                            需要安装其他JDK版本？
                        </h4>
                        <p class="text-slate-700">可以使用以下提示词让AI助手帮助安装其他版本：</p>
                        <div class="bg-white mt-2 p-3 rounded border border-gray-200">
                            <p class="text-sm font-mono text-gray-800">"请帮我在服务器上安装 JDK 11，并配置环境变量。需要验证安装是否成功，同时确保 JAVA_HOME 变量正确设置"</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- MySQL Installation -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
                <div class="p-6 md:p-8">
                    <div class="flex items-center mb-6">
                        <div class="bg-blue-100 text-blue-600 w-10 h-10 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-database"></i>
                        </div>
                        <h3 class="text-xl font-bold">3.2 MySQL安装</h3>
                    </div>
                    
                    <p class="mb-6">RuoYi-Vue使用MySQL作为主要数据库，以下是安装MySQL 5.6的步骤：</p>
                    
                    <div class="code-block rounded-lg overflow-hidden mb-6">
                        <div class="bg-gray-800 text-gray-300 px-4 py-2 text-sm flex justify-between items-center">
                            <span>终端命令</span>
                            <button class="text-gray-400 hover:text-white" onclick="copyCode(this)">
                                <i class="far fa-copy"></i>
                            </button>
                        </div>
                        <pre class="text-gray-200 p-4 overflow-x-auto"><code># 更新软件包列表
sudo apt update

# 安装 MySQL 5.6
sudo apt install -y mysql-server-5.6

# 启动 MySQL 服务
sudo systemctl start mysql

# 设置开机自启
sudo systemctl enable mysql

# 配置 MySQL 安全设置
sudo mysql_secure_installation</code></pre>
                    </div>
                    
                    <div class="bg-purple-50 rounded-lg p-4 border border-purple-100">
                        <h4 class="font-bold mb-2 text-purple-800 flex items-center">
                            <i class="fas fa-lightbulb text-purple-600 mr-2"></i>
                            数据库安全配置建议
                        </h4>
                        <p class="text-slate-700">可以使用以下提示词让AI助手帮助完成更完善的数据库配置：</p>
                        <div class="bg-white mt-2 p-3 rounded border border-gray-200">
                            <p class="text-sm font-mono text-gray-800">"请帮我在服务器上安装 MySQL 5.6，并进行安全配置。需要设置 root 密码，删除匿名用户，禁止 root 远程登录，并为 RuoYi-Vue 项目创建专用数据库和用户。请确保 MySQL 服务开机自启动。"</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Redis Installation -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
                <div class="p-6 md:p-8">
                    <div class="flex items-center mb-6">
                        <div class="bg-blue-100 text-blue-600 w-10 h-10 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-memory"></i>
                        </div>
                        <h3 class="text-xl font-bold">3.3 Redis安装</h3>
                    </div>
                    
                    <p class="mb-6">Redis作为缓存服务，可以显著提升系统性能。以下是安装Redis的步骤：</p>
                    
                    <div class="code-block rounded-lg overflow-hidden mb-6">
                        <div class="bg-gray-800 text-gray-300 px-4 py-2 text-sm flex justify-between items-center">
                            <span>终端命令</span>
                            <button class="text-gray-400 hover:text-white" onclick="copyCode(this)">
                                <i class="far fa-copy"></i>
                            </button>
                        </div>
                        <pre class="text-gray-200 p-4 overflow-x-auto"><code># 安装 Redis
sudo apt install -y redis-server

# 启动 Redis 服务
sudo systemctl start redis

# 设置开机自启
sudo systemctl enable redis

# 验证 Redis 是否正常运行
redis-cli ping</code></pre>
                    </div>
                    
                    <div class="bg-red-50 rounded-lg p-4 border border-red-100">
                        <h4 class="font-bold mb-2 text-red-800 flex items-center">
                            <i class="fas fa-shield-alt text-red-600 mr-2"></i>
                            Redis安全配置
                        </h4>
                        <p class="text-slate-700">默认安装的Redis没有密码保护，存在安全风险。可以使用以下提示词进行安全配置：</p>
                        <div class="bg-white mt-2 p-3 rounded border border-gray-200">
                            <p class="text-sm font-mono text-gray-800">"请帮我在服务器上安装 Redis，并配置为开机自启动。需要修改 Redis 配置以支持远程连接，同时设置访问密码以提高安全性。"</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Nginx Installation -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="p-6 md:p-8">
                    <div class="flex items-center mb-6">
                        <div class="bg-blue-100 text-blue-600 w-10 h-10 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-globe"></i>
                        </div>
                        <h3 class="text-xl font-bold">3.4 Nginx安装</h3>
                    </div>
                    
                    <p class="mb-6">Nginx作为Web服务器和反向代理，用于部署前端项目和后端API转发。以下是安装Nginx的步骤：</p>
                    
                    <div class="code-block rounded-lg overflow-hidden mb-6">
                        <div class="bg-gray-800 text-gray-300 px-4 py-2 text-sm flex justify-between items-center">
                            <span>终端命令</span>
                            <button class="text-gray-400 hover:text-white" onclick="copyCode(this)">
                                <i class="far fa-copy"></i>
                            </button>
                        </div>
                        <pre class="text-gray-200 p-4 overflow-x-auto"><code># 安装 Nginx
sudo apt install -y nginx

# 启动 Nginx 服务
sudo systemctl start nginx

# 设置开机自启
sudo systemctl enable nginx

# 验证 Nginx 是否正常运行
curl localhost</code></pre>
                    </div>
                    
                    <div class="bg-green-50 rounded-lg p-4 border border-green-100">
                        <h4 class="font-bold mb-2 text-green-800 flex items-center">
                            <i class="fas fa-cog text-green-600 mr-2"></i>
                            Nginx高级配置
                        </h4>
                        <p class="text-slate-700">安装完成后，需要针对RuoYi-Vue项目进行特定配置。可以使用以下提示词：</p>
                        <div class="bg-white mt-2 p-3 rounded border border-gray-200">
                            <p class="text-sm font-mono text-gray-800">"请帮我在服务器上安装并配置 Nginx，用于部署 RuoYi-Vue 前端项目。需要创建适合单页应用的配置文件，设置正确的静态文件目录，并配置反向代理将 API 请求转发到后端服务。"</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section 4 -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-green-600 text-white w-12 h-12 rounded-full flex items-center justify-center mr-4">
                    <span class="text-xl font-bold">4</span>
                </div>
                <h2 class="text-2xl font-bold">部署RuoYi-Vue项目</h2>
            </div>
            
            <div class="mb-8">
                <p class="text-lg mb-6">环境配置完成后，可以开始部署RuoYi-Vue项目。该项目采用前后端分离架构，后端基于Spring Boot，前端基于Vue.js。</p>
                
                <div class="mermaid mb-8">
                    graph LR
                        A[前端Vue项目] -->|HTTP请求| B[Nginx]
                        B -->|反向代理| C[后端Spring Boot]
                        C --> D[MySQL数据库]
                        C --> E[Redis缓存]
                </div>
            </div>
            
            <!-- Backend Deployment -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
                <div class="p-6 md:p-8">
                    <div class="flex items-center mb-6">
                        <div class="bg-green-100 text-green-600 w-10 h-10 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-code"></i>
                        </div>
                        <h3 class="text-xl font-bold">4.1 后端部署</h3>
                    </div>
                    
                    <p class="mb-6">首先部署Spring Boot后端项目，以下是详细步骤：</p>
                    
                    <div class="code-block rounded-lg overflow-hidden mb-6">
                        <div class="bg-gray-800 text-gray-300 px-4 py-2 text-sm flex justify-between items-center">
                            <span>终端命令</span>
                            <button class="text-gray-400 hover:text-white" onclick="copyCode(this)">
                                <i class="far fa-copy"></i>
                            </button>
                        </div>
                        <pre class="text-gray-200 p-4 overflow-x-auto"><code># 安装 Git
sudo apt install -y git

# 克隆项目代码
git clone https://gitee.com/y_project/RuoYi-Vue.git

# 进入项目目录
cd RuoYi-Vue

# 进入后端目录
cd ruoyi-admin

# 使用 Maven 打包项目
./mvnw clean package -DskipTests

# 创建部署目录
mkdir -p /opt/ruoyi

# 复制 jar 包到部署目录
cp target/ruoyi-admin.jar /opt/ruoyi/

# 创建启动脚本
cat > /opt/ruoyi/start.sh << EOF
#!/bin/bash
nohup java -jar ruoyi-admin.jar > ruoyi.log 2>&1 &
EOF

# 添加执行权限
chmod +x /opt/ruoyi/start.sh

# 启动应用
cd /opt/ruoyi
./start.sh</code></pre>
                    </div>
                    
                    <div class="bg-blue-50 rounded-lg p-4 border border-blue-100">
                        <h4 class="font-bold mb-2 text-blue-800 flex items-center">
                            <i class="fas fa-cogs text-blue-600 mr-2"></i>
                            后端优化建议
                        </h4>
                        <p class="text-slate-700">可以使用以下提示词让AI助手帮助优化后端部署：</p>
                        <div class="bg-white mt-2 p-3 rounded border border-gray-200">
                            <p class="text-sm font-mono text-gray-800">"请帮我在服务器上部署 RuoYi-Vue 的后端服务。需要使用 Maven 编译打包项目，创建系统服务实现开机自启动，并配置 JVM 参数优化性能。同时需要导入初始数据库脚本，并确保应用能够正确连接到 MySQL 和 Redis。"</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Frontend Deployment -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="p-6 md:p-8">
                    <div class="flex items-center mb-6">
                        <div class="bg-green-100 text-green-600 w-10 h-10 rounded-full flex items-center justify-center mr-4">
                            <i class="fab fa-vuejs"></i>
                        </div>
                        <h3 class="text-xl font-bold">4.2 前端部署</h3>
                    </div>
                    
                    <p class="mb-6">前端项目基于Vue.js构建，需要先安装Node.js环境，然后构建生产环境代码并配置Nginx。</p>
                    
                    <div class="code-block rounded-lg overflow-hidden mb-6">
                        <div class="bg-gray-800 text-gray-300 px-4 py-2 text-sm flex justify-between items-center">
                            <span>终端命令</span>
                            <button class="text-gray-400 hover:text-white" onclick="copyCode(this)">
                                <i class="far fa-copy"></i>
                            </button>
                        </div>
                        <pre class="text-gray-200 p-4 overflow-x-auto"><code># 进入前端目录
cd ../ruoyi-ui

# 安装 Node.js 和 npm
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt install -y nodejs

# 安装依赖
npm install

# 构建生产环境代码
npm run build:prod

# 将构建结果复制到 Nginx 目录
sudo cp -r dist/* /var/www/html/

# 配置 Nginx
sudo nano /etc/nginx/sites-available/ruoyi</code></pre>
                    </div>
                    
                    <div class="mb-6">
                        <h4 class="font-bold mb-3">Nginx配置示例</h4>
                        <div class="code-block rounded-lg overflow-hidden">
                            <div class="bg-gray-800 text-gray-300 px-4 py-2 text-sm flex justify-between items-center">
                                <span>/etc/nginx/sites-available/ruoyi</span>
                                <button class="text-gray-400 hover:text-white" onclick="copyCode(this)">
                                    <i class="far fa-copy"></i>
                                </button>
                            </div>
                            <pre class="text-gray-200 p-4 overflow-x-auto"><code>server {
    listen 80;
    server_name your_domain.com;

    root /var/www/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /prod-api/ {
        proxy_pass http://localhost:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}</code></pre>
                        </div>
                    </div>
                    
                    <div class="code-block rounded-lg overflow-hidden mb-6">
                        <div class="bg-gray-800 text-gray-300 px-4 py-2 text-sm flex justify-between items-center">
                            <span>完成Nginx配置</span>
                            <button class="text-gray-400 hover:text-white" onclick="copyCode(this)">
                                <i class="far fa-copy"></i>
                            </button>
                        </div>
                        <pre class="text-gray-200 p-4 overflow-x-auto"><code># 创建符号链接
sudo ln -s /etc/nginx/sites-available/ruoyi /etc/nginx/sites-enabled/

# 测试 Nginx 配置
sudo nginx -t

# 重启 Nginx
sudo systemctl restart nginx</code></pre>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // Copy code block content
        function copyCode(button) {
            const codeBlock = button.closest('.code-block').querySelector('code');
            const range = document.createRange();
            range.selectNode(codeBlock);
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(range);
            document.execCommand('copy');
            window.getSelection().removeAllRanges();
            
            // Show copied feedback
            const originalIcon = button.innerHTML;
            button.innerHTML = '<i class="fas fa-check"></i>';
            setTimeout(() => {
                button.innerHTML = originalIcon;
            }, 2000);
        }
        
        // Add hover effect to headings
        document.querySelectorAll('h2, h3, h4').forEach(heading => {
            heading.classList.add('highlight');
        });
    </script>
</body>
</html>
```